<template>
  <div class="service">
    <div class="online">
      <div class="service_l">
        <i class="iconfont icon-kefu"></i>
        <span><a href="tencent://message/?uin=1239300678&Site=sc.chinaz.com&Menu=yes">在线客服</a>
        </span>
      </div>
      <div class="service_r">
        <i class="iconfont icon-dianhua"></i>
        <span> <a href="tencent://message/?uin=1239300678&Site=sc.chinaz.com&Menu=yes">在线客服</a>
        </span>
      </div>
    </div>

    <div class="questions">
      <h4>热门问题</h4>
      <ul>
        <li v-for="(item,index) in explaintext"
            :key="index"
            @click="ansAction(index)">
          <span>{{explaintext[index].title}}</span>
          <i class="iconfont icon-fanhui1"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceCenter',
  data: function () {
    return {
      explaintext: [],
    }
  },
  methods: {
    ansAction (index) {
      this.$router.push({ name: 'Answer', params: { titles: this.explaintext[index].title, answers: this.explaintext[index].result } })
    }
  },
  created () {
    this.$axios.get('https://elm.cangdu.org/v3/profile/explain', {
      params: {

      }
    }).then(res => {
      // console.log(res);
      let res1 = res.data;
      let text = [];
      let reg = /[\u4E00-\u9FA5]/g;
      for (const key in res1) {
        if (reg.test(res1[key])) {
          if (res1[key].match(reg).length <= 8) {
            let Obj = {};
            Obj.name = key;
            Obj.title = res1[key];
            text.push(Obj);
          }
        }
      }
      for (const key in res1) {
        for (let i = 0; i < text.length; i++) {
          var keys = text[i].name.split('C')[0] + "Content";
          if (key == keys) {
            let Obj = {};
            Obj.name = text[i].name;
            Obj.title = text[i].title;
            Obj.result = res1[key];
            // console.log(Obj)
            this.explaintext.push(Obj);
            continue;
          }
        }
      }
      this.explaintext.splice(16, 1);
      this.explaintext.splice(18, 1);
      console.log(this.explaintext);
    }).catch(err => console.log(err));
  },
}
</script>

<style lang="less">
.service {
  background-color: white;
  .online {
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    .service_l,
    .service_r {
      width: 50%;
      height: 94px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        font-size: 25px;
        margin-bottom: 7px;
      }
      span {
        font-size: 15px;
        color: #666;
        a {
          color: #666;
        }
      }
    }

    .service_l {
      border-right: 1px solid #f5f5f5;
      i {
        color: rgb(255, 123, 82);
      }
    }
    .service_r {
      i {
        color: #6ac206;
      }
    }
  }

  .questions {
    h4 {
      font-size: 18px;
      font-weight: normal;
      color: #333;
      line-height: 71px;
      border-bottom: 1px solid #f5f5f5;
      padding-left: 16px;
    }
    ul {
      li {
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 47px;
        border-bottom: 1px solid #f5f5f5;
        span {
          font-size: 15px;
          color: #666;
        }
      }
    }
  }
}
</style>